<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue.js 切换不同显示布局</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <style>
    /* 隐藏未编译的变量 */

    [v-cloak] {
    display: none;
}

*{
    margin:0;
    padding:0;
}

body{
    font:15px/1.3 'Open Sans', sans-serif;
    color: #5e5b64;
    text-align:center;
}

a, a:visited {
    outline:none;
    color:#389dc1;
}

a:hover{
    text-decoration:none;
}

section, footer, header, aside, nav{
    display: block;
}

/*-------------------------
    搜索框
--------------------------*/

.bar{
    background-color:#5c9bb7;

    background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
    background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
    background-image:linear-gradient(top, #5c9bb7, #5392ad);

    box-shadow: 0 1px 1px #ccc;
    border-radius: 2px;
    width: 580px;
    padding: 10px;
    margin: 45px auto 25px;
    position:relative;
    text-align:right;
    line-height: 1;
}

.bar a{
    background:#4987a1 center center no-repeat;
    width:32px;
    height:32px;
    display:inline-block;
    text-decoration:none !important;
    margin-right:5px;
    border-radius:2px;
    cursor:pointer;
}

.bar a.active{
    background-color:#c14694;
}

.bar a.list-icon{
    background-image:url();
}

.bar a.grid-icon{
    background-image:url();
}

.bar input{
    background:#fff no-repeat 13px 13px;

    border: none;
    width: 100%;
    line-height: 19px;
    padding: 11px 0;

    border-radius: 2px;
    box-shadow: 0 2px 8px #c4c4c4 inset;
    text-align: left;
    font-size: 14px;
    font-family: inherit;
    color: #738289;
    font-weight: bold;
    outline: none;
    text-indent: 40px;
}

/*-------------------------
    列表布局
--------------------------*/

ul.list{
    list-style: none;
    width: 500px;
    margin: 0 auto;
    text-align: left;
}

ul.list li{
    border-bottom: 1px solid #ddd;
    padding: 10px;
    overflow: hidden;
}

ul.list li img{
    width:120px;
    height:120px;
    float:left;
    border:none;
}

ul.list li p{
    margin-left: 135px;
    font-weight: bold;
    color:#6e7a7f;
}

/*-------------------------
    网格布局
--------------------------*/

ul.grid{
    list-style: none;
    width: 570px;
    margin: 0 auto;
    text-align: left;
}

ul.grid li{
    padding: 2px;
    float:left;
}

ul.grid li img{
    width:280px;
    height:280px;
    object-fit: cover;
    display:block;
    border:none;
}
</style>

</head>
<body>

<form id="main" v-cloak>

<div class="bar">

    <!-- 两个按钮用于切换不同的列表布局 -->

    <a class="list-icon" v-bind:class="{ 'active': layout == 'list'}" v-on:click="layout = 'list'"></a>
    <a class="grid-icon" v-bind:class="{ 'active': layout == 'grid'}" v-on:click="layout = 'grid'"></a>
    </div>

    <!-- 我们设置了两套布局页面。使用哪套依赖于 "layout" 绑定 -->

    <ul v-if="layout == 'grid'" class="grid">
    <!-- 使用大图，没有文本 -->
<li v-for="a in articles">
    <a v-bind:href="a.url" target="_blank"><img v-bind:src="a.image.large" /></a>
    </li>
    </ul>

    <ul v-if="layout == 'list'" class="list">
    <!-- 使用小图及标题 -->
    <li v-for="a in articles">
    <a v-bind:href="a.url" target="_blank"><img v-bind:src="a.image.small" /></a>
    <p>{{a.title}}</p>
</li>
</ul>

</form>
<script>

var demo = new Vue({
    el: '#main',
    data: {
        // 视图模型，可能的值是 "grid" 或 "list"。
        layout: 'grid',

        articles: [{
            "title": "HTML 教程",
            "url": "https://www.runoob.com/html/html-tutorial.html",
            "image": {
                "large": "https://static.runoob.com/images/mix/htmlbig.png",
                "small": "https://static.runoob.com/images/icon/html.png"
            }
        },
            {
                "title": "CSS 教程",
                "url": "https://www.runoob.com/css/css-tutorial.html",
                "image": {
                    "large": "https://static.runoob.com/images/mix/cssbig.png",
                    "small": "https://static.runoob.com/images/icon/css.png"
                }
            },
            {
                "title": "JS 教程",
                "url": "https://www.runoob.com/js/js-tutorial.html",
                "image": {
                    "large": "https://static.runoob.com/images/mix/jsbig.jpeg",
                    "small": "https://static.runoob.com/images/icon/js.png"
                }
            },
            {
                "title": "SQL  教程",
                "url": "https://www.runoob.com/sql/sql-tutorial.html",
                "image": {
                    "large": "https://static.runoob.com/images/mix/sqlbig.png",
                    "small": "https://static.runoob.com/images/icon/sql.png"
                }
            },
            {
                "title": "Ajax 教程",
                "url": "https://www.runoob.com/ajax/ajax-tutorial.html",
                "image": {
                    "large": "https://static.runoob.com/images/mix/ajaxbig.png",
                    "small": "https://static.runoob.com/images/icon/ajax.png"
                }
            },
            {
                "title": "Python 教程",
                "url": "https://www.runoob.com/pyhton/pyhton-tutorial.html",
                "image": {
                    "large": "https://static.runoob.com/images/mix/pythonbig.png",
                    "small": "https://static.runoob.com/images/icon/python.png"
                }
            }]

    }
});

</script>
</body>
</html>